import React,{Component} from "react"
import {observer} from "mobx-react"
import datamobx from "*/mobx/data"
import {axios} from "&/axios"
import "./index.scss"
import{
    Tabs,
    List,
    Card,
    
}from "antd";
const { TabPane } = Tabs;
const {Meta} =Card;
@observer
 class Buy extends Component{
     componentDidMount(){
         if(!datamobx.goodslist){
             axios.post("/api/findGoodlist")
             .then(res=>{
                 if(res.data.type){
                     datamobx.getGoodsListSync(res.data.result)
                 }
             })
         }
         if(!datamobx.typelist){
             axios.post("/api/findGoodType")
             .then(res=>{
                 if(res.data.type){
                     datamobx.getTypeListSync(res.data.result)
                 }
             })
         }
     }
    render(){
        const {
            typelist,
            goodslist 
        } = datamobx;
        return(
            <div>
                <h2>购买商品</h2>
                <div>
                    <Tabs 
                        tabPosition={'left'}
                        className="tab"
                        defaultActiveKey='0'
                    >
                        {
                            datamobx.typelist&&datamobx.typelist.map((item,i)=>(
                                <TabPane key={i} tab={item.text}>
                                    <GoodsList
                                        goods={goodslist&&goodslist.filter (val=>val.type.value==item.value)}
                                        item={item}
                                        history={this.props.history}
                                    />
                                </TabPane>
                            ))
                        }
                       
                    </Tabs>
                </div>
            </div>
        )
    }
}
class GoodsList extends Component{
    goodDetail=(item)=>{
        this.props.history.push("/main/shopping/goodsdetail/"+item._id+"?name="+item.name )
    }
    render(){
        const{
            goods
        }=this.props
        return(
            <div>
               {
                   goods&&<List
                   grid={{ gutter: 16, column: 4 }}
                   dataSource={goods}
                   renderItem={item => (
                     <List.Item>
                       <Card 
                            
                            hoverable
                            cover={<img alt="example" src={item.img} style={{height:210}}/>}
                            onClick={()=>this.goodDetail(item)}

                       >
                           <h2 style={{overflow: "hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",margin:"0 10"}}>{item.name}</h2>
                           <Meta title={"价格:"+item.price} description={item.type.text}/>
                       </Card>
                     </List.Item>
                   )}
                 />
               }
            </div>
        )
    }
}
export default Buy